<template>
    <section class="checkae">
        <input type="checkbox" :id="title" :value="myval" @click="changeval">
        <label :for="title" class="checkbox" >
            <span>√</span>
            <span>
                <slot></slot>
            </span>
        </label>
    </section>
</template>
<script>
export default {
    props:['val','title'],
    data(){
        return{
            myval:false
        }
    },
    methods:{
        changeval(){
            this.myval=!this.myval
            this.$emit('update:val',this.myval)
        }
    }
}
</script>
<style lang="scss" >
@import "@/assets/css/variables.scss";
.checkbox{
    span:nth-child(1){
        display: inline-block;
        width: 18px;
        height: 18px;
        border: 1px solid #ccc;
        text-align: center;
        line-height: 18px;
        color: #fff;
    }
}
.checkae>input:checked+label{
    span{
        color: $xtxColor;
    }
    span:nth-child(1){
        border: 1px solid #ccc;
    }
}
</style>